<template>
  <view class="page">
    <image class="bg" :src="bgUrl" mode="aspectFill"></image>
    <view class="main">
      <view class="title">输入验证码</view>
      <view class="msg">验证码已发送至手机{{ phoneNumber }}</view>
      <input-gird
        v-model="code"
        :maxlength="6"
        @finish="finishCode"
        :focus="true"
      ></input-gird>
      <view class="count-down" @click="resend">
        <count-down
          v-if="coundDownShow"
          :timestamp="timestamp"
          @end="endCountDown"
        ></count-down>
        {{ desc }}
      </view>
    </view>
    <Message ref="message"></Message>
  </view>
</template>

<script>
import detailModule from "@/common/mixins/detail-module";
import { getSMS } from "@/common/api/login";
import CountDown from "@/components/public/count-down/index";
import { mapState, mapActions, mapMutations } from "vuex";
import inputGird from "@/components/public/input/gird2";

import { imgBaseUrl, imgBaseUrlV0 } from "@/common/config";
export default {
  mixins: [detailModule],
  components: {
    CountDown,
    inputGird,
  },
  computed: {
    ...mapState("User", ["sessionKey"]),
  },
  data() {
    return {
      phoneNumber: "",
      code: "",
      dataForm: {},
      timestamp: 59,
      desc: "点击重新获取验证码",
      coundDownShow: false,
      bgUrl: imgBaseUrlV0 + "login-bg2.png",
    };
  },
  async onLoad(e) {
    if (e.phoneNumber !== undefined) {
      this.phoneNumber = e.phoneNumber;
    }
    this.initData();
  },
  methods: {
    ...mapActions("User", [
      "login",
      "phoneLogin",
      "getUserInfo",
      "getLoginSession",
    ]),
    initData() {
      this.resend();
    },
    endCountDown() {
      this.coundDownShow = false;
      this.desc = "点击重新获取验证码";
    },
    async resend() {
      if (!this.coundDownShow) {
        this.desc = "";
        // 发送验证码
        await getSMS({ mobile: this.phoneNumber })
          .then((response) => {
            this.message.success("验证码已发送");
            this.coundDownShow = true;
            this.desc = "秒之后可重新发送验证码";
            this.timestamp = 59;
          })
          .catch((res) => {
            this.endCountDown();
          });
      }
    },
    async finishCode(e) {
      if (this.loginStatus) {
        return;
      }
      this.code = e;
      this.loginStatus = true;
      await this.onLogin();
      this.loginStatus = false;
    },
    async onLogin() {
      uni.showLoading({
        title: "登录中",
      });
      // #ifdef MP
      let code = await this.getLoginSession();
      if (!code) {
        uni.hideLoading();
        return this.message.error("获取微信code失败");
      }
      // #endif

      // #ifndef MP
      let code = "";
      // #endif
      console.log(this.code, "? this.code");
      this.login({
        mobile: this.phoneNumber,
        code: this.code,
        mini_code: code,
      })
        .then((res) => {
          if (res.code !== this.$ERR_OK) {
            uni.hideLoading();
            return this.message.error(res.message || "登录失败");
          }
          this.getUserInfo()
            .then((res) => {
              uni.hideLoading();
              uni.reLaunch({
                url: "/pages/tabbar-pages/tabbar-pages",
              });
            })
            .catch((err) => {
              uni.hideLoading();
            });
        })
        .catch((err) => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  min-height: calc(100vh - var(--window-top));
  background-color: #113476;

  .bg {
    position: absolute;
    z-index: 1;
    width: 100%;
  }
}
.main {
  position: relative;
  z-index: 2;
  padding-top: 90rpx;
  color: #fff;

  .title {
    font-size: 40rpx;
    padding: 0 30rpx;
  }
  .msg {
    font-size: 26rpx;
    padding: 30rpx 30rpx 60rpx;
  }
  .count-down {
    font-size: 26rpx;
    padding: 30rpx 30rpx 0;
  }
}
</style>